<template>
  <div>
    <div class="ad_title">可改进指标项数</div>
    <t-table :table="table" :columns="table.columns" row-key="menuId"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :defaultExpandAll="defaultExpandAll"
      isShowTreeStyle :isShowPagination="false"/>
  </div>
</template>

<script lang="ts">
import TreeData from "./tableData1.json";

interface TreeDataNode {
  menuId: number | string;
  parentId?: number | string;
  children?: TreeDataNode[];
  num?: string;
  name?: string;
  department?: string;
  target?: string;
  assessment?: string;
  total?: string;
  current?: string;
  improve?: string;
  [key: string]: any;
}

interface TableConfig {
  border: boolean;
  data: TreeDataNode[];
  columns: TableColumn[];
}

interface TableColumn {
  prop: string;
  label: string;
  minWidth: string;
  align?: 'center' | 'left' | 'right';
}

export default defineComponent({
  setup() {
    const defaultExpandAll = ref(true);
    const table = reactive<TableConfig>({
      border: true,
      data: [],
      columns: [
        {
          prop: "num",
          label: "指标序号",
          minWidth: "120",
        },
        {
          prop: "name",
          label: "指标项名称",
          minWidth: "240",
        },
        {
          prop: "department",
          label: "责任科室",
          minWidth: "100",
          align: "center",
        },
        {
          prop: "target",
          label: "年度目标得分",
          minWidth: "100",
          align: "center",
        },
        {
          prop: "assessment",
          label: "上半年自评得分",
          minWidth: "120",
          align: "center",
        },
        {
          prop: "total",
          label: "国考满分",
          minWidth: "100",
        },
        {
          prop: "current",
          label: "当前得分",
          minWidth: "100",
        },
        {
          prop: "improve",
          label: "改进措施",
          minWidth: "400",
        },
      ],
    });

    const handleTree = <T extends TreeDataNode>(
      data: T[],
      idKey: string = 'id',
      parentIdKey: string = 'parentId',
      childrenKey: string = 'children',
      rootId: number | string = 0
    ): T[] => {
      const cloneData = JSON.parse(JSON.stringify(data)) as T[];
      const treeData = cloneData.filter((father) => {
        const branchArr = cloneData.filter((child) => {
          return father[idKey] === child[parentIdKey];
        });
        if (branchArr.length > 0) {
          (father as any)[childrenKey] = branchArr;
        }
        return father[parentIdKey] === rootId;
      });
      return treeData.length ? treeData : data;
    };

    const getList = () => {
      // 这里假设 TreeData 已经符合接口定义
      if (TreeData.success) {
        table.data = handleTree(TreeData.data as TreeDataNode[], 'menuId');
      }
    };

    onMounted(() => {
      getList();
    });

    return {
      defaultExpandAll,
      table,
    };
  },
});
</script>

<style lang="scss" scoped>
.ad_title {
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  position: relative;
}

:deep(.el-tooltip) {
  display: flex;
  align-items: center;
}
</style>
